<template>
	<div>
		<mj-title type="h2" title="Alert 警告提示"></mj-title>
		<div class="page-desc">静态地呈现一些警告信息，可手动关闭。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-alert>普通的提示信息</mj-alert>
				<mj-alert type="success">成功的提示信息</mj-alert>
				<mj-alert type="warning">警告的提示信息</mj-alert>
				<mj-alert type="error">错误的提示信息</mj-alert>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
						&lt;template>
							&lt;mj-alert>普通的提示信息&lt;/mj-alert>
							&lt;mj-alert type="success">成功的提示信息&lt;/mj-alert>
							&lt;mj-alert type="warning">警告的提示信息&lt;/mj-alert>
							&lt;mj-alert type="error">错误的提示信息&lt;/mj-alert>
						&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="含其他信息"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-alert title="Title">普通的提示信息</mj-alert>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-alert title="Title">普通的提示信息&lt;/mj-alert>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="图标"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-alert show-icon>普通的提示信息</mj-alert>
				<mj-alert type="success" show-icon>成功的提示信息</mj-alert>
				<mj-alert type="warning" show-icon>警告的提示信息</mj-alert>
				<mj-alert type="error" show-icon>错误的提示信息</mj-alert>
				<mj-alert show-icon title="标题">普通的提示信息</mj-alert>
				<mj-alert title="标题">
					<template slot="icon">
						<Icon type="notice" />
					</template>
					自定义icon
				</mj-alert>
				<mj-alert closable close-text="知道了">自定义关闭文字</mj-alert>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-alert show-icon>普通的提示信息&lt;/mj-alert>
					&lt;mj-alert type="success" show-icon>成功的提示信息&lt;/mj-alert>
					&lt;mj-alert type="warning" show-icon>警告的提示信息&lt;/mj-alert>
					&lt;mj-alert type="error" show-icon>错误的提示信息&lt;/mj-alert>
					&lt;mj-alert show-icon title="标题">普通的提示信息&lt;/mj-alert>
					&lt;mj-alert title="标题">
						&lt;template slot="icon">
							&lt;Icon type="notice" />
						&lt;/template>
						自定义icon
					&lt;/mj-alert>
					&lt;mj-alert closable close-text="知道了">自定义关闭文字&lt;/mj-alert>
				&lt;/template>
				</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="可关闭"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-alert show-icon closable @close="alertClose">普通的提示信息</mj-alert>
				<mj-alert show-icon closable title="标题" @close="alertClose">普通的提示信息</mj-alert>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-alert show-icon closable @close="alertClose">普通的提示信息&lt;/mj-alert>
						&lt;mj-alert show-icon closable title="标题" @close="alertClose">普通的提示信息&lt;/mj-alert>
					&lt;/template>
					&lt;script>
					export default {
						methods:{
							alertClose() {
								console.log('close')
							}
						}
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Alert 参数"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>type</td>
            		<td>警告提示样式，可选值为<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code></td>
            		<td>String</td>
            		<td>info</td>
            	</tr>
            	<tr>
            		<td>closable</td>
            		<td>是否可关闭</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>show-icon</td>
            		<td>是否显示图标</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>title</td>
            		<td>标题</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>close-text</td>
            		<td>自定义关闭按钮文本</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            </tbody>
        </table>

		<mj-title type="h6" title="Alert Slot插槽"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>名称</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>icon</td>
					<td>自定义icon图标</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Alert 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>返回值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>close</td>
					<td>关闭时触发</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	methods:{
		alertClose() {
			console.log('close')
		}
	}
}
</script>
